<template>
	<view class="body">
		<view class="content" :style="{background:color}">
			<view class="title">{{more.content}}</view>
			<view class="name">来自-{{more.tag}}	{{more.origin}}-{{more.name}}</view>
		</view>
		<button type="button" @click="huan_huan">换一换</button>
	</view>
</template>

<script>
	import {
		GetXygeng,
		Getcolor
	} from '@/api/index.js'
	export default {
		data() {
			return {
				more: {},
				color:''
			}
		},
		mounted() {
			this.Get_color()
			this.get_list()
			
		},
		methods: {
			huan_huan(){
				this.get_list()
			},
			Get_color(){
				Getcolor().then(res => {
					this.color=res
				})
			},
			get_list() {
				GetXygeng().then(res => {
					console.log(res.data)
					// this.more=res.data.data
					if (res.data.code == 200) {
						console.log(res.data)
						this.more = res.data.data
					}
				})
			}
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		padding: 20px 5px;
		background: #eb7825;
		box-sizing: border-box;
		border-radius:5px;
	}
	.title {
		height: 10%;
		font-size:36rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		text-align:left;
	}

	.name {
		height:20%;
		font-size: 25rpx;
		color: #fff;
		margin-top:20rpx;
		margin-bottom: 10rpx;
		text-align:right;
	}
	button{
		width: 100%;
		height:100rpx;
		background: #b15a1b;
		border-radius:5px;
		color: #fff;
		font-size:36rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		text-align:center;
		line-height:100rpx;
	}
</style>